<template>
  <div class="updateCustomer">
    <el-drawer
      custom-class="m7-drawer"
      :title="drawer.title"
      :visible.sync="drawer.isShow"
      :modal="false"
      direction="rtl"
      :modal-append-to-body="true"
      ref="drawer"
      size="900px"
      class="webchat-detail-drawer"
      @close="closeDraw()">
      <div id="apassMicroUpdateCustomer" class="updateCustomerContainer page-container mp-micro"></div>
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import drawer from '@/common/views/drawer/index.vue'
import { CommonModule } from '@/store/modules/common'
import { loadMicroApp } from 'qiankun'
@Component({
  name: 'updateCustomer',
  components: { drawer }
})
export default class UpdateCustomer extends Vue {
  @Prop() private drawer
  private customerMicApp: any
  private $getCache: any
  private $router: any
  private $store: any

  private mpWorksheetDict = {}

  private initMicroApp (store: object) {
    this.customerMicApp = loadMicroApp(
      {
        name: 'apass-micro-updateCustomer',
        entry: `${(CommonModule.initConfig as any).platformConfig.mopowerUrl}/sheetList.html`,
        // entry: 'http://172.16.88.180:8080/sheetList.html',
        container: '#apassMicroUpdateCustomer',
        props: {
          // routerBase: this.$router.currentRoute.path,
          store,
          user: { // 登录健全
            id: this.$store.state.common.mpInfo.mpUserId,
            companyId: this.$store.state.common.mpInfo.mpCompanyId
          }
        }
      }
    )
  }

  private closeDraw () {
    this.$emit('closeDraw')
  }

  private saveOrUpdateFun (res) {
    const data = JSON.parse(JSON.stringify(res))
    const dict = JSON.parse(JSON.stringify(this.mpWorksheetDict))
    for (const k in dict) {
      const v = dict[k]
      dict[v] = k
      delete dict[k]
    }
    for (const k in data) {
      if (dict[k]) {
        data[dict[k]] = data[k]
        delete data[k]
      }
    }
    if (Object.keys(dict).length === 0) {
      console.error('/customer/config/cache接口返回的数据有问题')
    }
    this.$emit('closeDraw')
    this.$emit('afterAddCustRecord', data)
  }

  @Watch('drawer', { immediate: true, deep: true })
  private drawerChange (data) {
    if (data.isShow) {
      CommonModule.getMpInfo({ url: '/auth/get/mp/relation', method: 'POST', data: {} }).then(() => {
        this.$getCache('/crm/action/customer/config/cache', ['customerList'], false).then((cache: any) => {
          this.mpWorksheetDict = cache.customerList[0]
          const store = {
            submitSelect: (res, a) => {
              this.saveOrUpdateFun(res)
            },
            applicationId: this.$store.state.common.mpInfo.mpApplicationId,
            worksheetId: this.$store.state.common.mpInfo.mpCrmWorksheetId
          }
          this.$nextTick(() => {
            this.initMicroApp(store)
          })
        })
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '../../common/style/base.styl'
  .updateCustomerContainer
    height 100%
    z-index 1999 !important
</style>
<style lang="stylus">
// 子应用主体
#apassMicroUpdateCustomer .sheetRightContent
  background-color white
#apassMicroUpdateCustomer .sheetRightContent > .detail
  height calc(100vh - 169px) !important
#apassMicroUpdateCustomer .sheetRightContent > .detail > .el-table
  height calc(100vh - 180px) !important
  border 1px solid #fff !important
#apassMicroUpdateCustomer .sheet-header .title .sheet-name .name
  font-size 14px
  display none
// 表头
#apassMicroUpdateCustomer .sheet-header
  padding 16px 0 0
  box-shadow none
#apassMicroUpdateCustomer .sheet-header .title
  padding 0 16px
#apassMicroUpdateCustomer .view
  padding 0 16px
  border-bottom 1px solid #ecf0f3
#apassMicroUpdateCustomer .el-table .el-table__header-wrapper
  // border-radius 0px
// 表格
#apassMicroUpdateCustomer .el-table thead
  color #303753
  font-weight 500
#apassMicroUpdateCustomer .custom-table th
  background-color #f1f5fa
#apassMicroUpdateCustomer div.target
  color #767e92
  font-weight 400
// 分页
#apassMicroUpdateCustomer .detail .page
  margin 20px 0 16px 0
  padding 0
#apassMicroUpdateCustomer .el-pagination span:not([class*=suffix])
  font-size 12px !important
#apassMicroUpdateCustomer .el-pagination__sizes .el-input .el-input__inner
  font-size 12px !important
#apassMicroUpdateCustomer .el-pagination__editor .el-input .el-input__inner
  font-size 12px !important
</style>
